<template>
  <el-form ref="shopQueryList" :inline="true" label-width="100px">
    <el-form-item label="店铺名称">
      <el-select v-model="shopQuery.shopName" placeholder="请选择">
        <el-option v-for="(item,i) in shopNameList" :key="i" :label="item" :value="item" />
      </el-select>
    </el-form-item>
    <el-form-item label="用户名" prop="userName">
      <el-select v-model="shopQuery.userName" placeholder="请选择">
        <el-option v-for="(item,i) in userNameList" :key="i" :label="item" :value="item" />
      </el-select>
    </el-form-item>
    <el-form-item label="交易类型" prop="tradeType">
      <el-select v-model="shopQuery.tradeType" placeholder="请选择">
        <el-option v-for="(item,i) in tradeTypeList" :key="i" :label="item" :value="item" />
      </el-select>
    </el-form-item>
    <el-form-item label="提现单号">
      <el-input v-model="shopQuery.withdrawOrder" />
    </el-form-item>
    <el-form-item label="日期">
      <el-date-picker
        v-model="shopQuery.date"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryData">查询</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// import { get } from '@/api/user.js'
import { queryExpenseData, queryIncomeData } from '@/api/platform.js'
export default {
  props: {
    shopQueryList: {
      type: Object,
      default: () => {}
    },
    isIncome: {
      type: Boolean,
      default: true
    },
    pageData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      tradeTypeList: [
        '现金付款',
        '刷储蓄卡支付',
        '刷信用卡支付',
        '微信付款',
        '支付宝'
      ],
      shopNameList: [
        '高杰的商铺',
        '谢秀英的商铺',
        '董强的商铺',
        '于丽的商铺',
        '程洋的商铺',
        '尹秀英的商铺',
        '彭伟的商铺',
        '钱秀英的商铺',
        '叶芳的商铺',
        '杨超的商铺'
      ],
      userNameList: ['潘艳',
        '程磊',
        '彭静',
        '许磊',
        '罗芳',
        '郝强',
        '赖静',
        '雷秀英',
        '邱敏',
        '唐平'],
      shopQuery: {}
    }
  },
  async created() {
    // const data = await get()
    // console.log(data)
    this.shopQuery = { ...this.shopQueryList }
  },
  methods: {
    async queryExpenseData() {
      // var shopQuery = {}
      // for (var k in this.shopQuery) {
      //   if (this.shopQuery[k]) {
      //     shopQuery[k] = this.shopQuery[k]
      //   }
      // }
      const { data } = await queryExpenseData({ ...this.filter(this.shopQuery), ...this.pageData })
      console.log(data.data)
      this.$emit('query-expense-data', data.data)
    },
    async queryIncomeData() {
      const { data } = await queryIncomeData({ ...this.filter(this.shopQuery), ...this.pageData })
      console.log(data.data)
      this.$emit('query-income-data', data.data)
    },
    queryData() {
      if (this.isIncome) {
        this.queryIncomeData()
      } else {
        this.queryExpenseData()
      }
    },
    filter(data) {
      var shopQuery = {}
      for (var k in data) {
        if (data[k]) {
          shopQuery[k] = this.shopQuery[k]
        }
      }
      return shopQuery
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  padding-bottom: 50px;
  padding-top: 25px;
}
::v-deep.el-form--inline .el-form-item {
  margin-right: 100px;
  margin-left: 100px;
}
.add-btn {
  padding-bottom: 20px;
}
.el-pagination {
  padding-top: 30px;
}
</style>
